<!--
校园分享
1.@click="onGiveLike(i.id,index)" 点赞
2.@click="onDelete(i.id)" 删除帖子
3.@click="onClickComment(i.id)" 打开/关闭评论
4. @click="onSendComment" 发送评论
5.@click="onDeleteComment(comment.id)" 删除评论
6.@click.native="onChange(0)"校区 0/1/2/3 代表 全部/官塘/社湾/我的分享
7.
-->

<template>
  <div class="body">
    <el-container class="m-container">

      <el-header class="m-margin">
        <el-menu :default-active="activeIndex" class="el-menu-demo" style="box-shadow: 0 0 5px #0003;" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0" @click.native="onChange(0)">全部</el-menu-item>
          <el-menu-item index="1" @click.native="onChange(1)">官塘校区</el-menu-item>
          <el-menu-item index="2" @click.native="onChange(2)">社湾校区</el-menu-item>
          <el-menu-item index="3" @click.native="onChange(3)">我的分享</el-menu-item>
        </el-menu>
      </el-header>

      <el-main style="overflow-y: hidden">


        <el-row>
          <el-col :span="24">
            <div style="border: #bebdbd none; box-shadow: 0 0 10px #0003; border-radius: 10px" class="m-container-tiny animate__animated animate__fadeInUp" :class="{'wow animate__animated animate__fadeInUp': CampusSharingList.length>2}" v-for="(i, index) in CampusSharingList">
              <el-row>
                <el-col :span="12">
                  <div class="left m-padding"> <el-image style="width: 50px; height: 50px; border-radius:50%" :src="i.userImage"></el-image>
                    <div class="m-padding-lr" style="margin-top: 5px">
                      <p>{{ i.userName }}</p>
                      <p class="m-color">
                        <svg v-if="Xiaoqu != 3 && i.addressId == 1" class="icon" aria-hidden="true">
                          <use xlink:href="#icon-xuexiao3"></use>
                        </svg>
                        <svg v-if="Xiaoqu != 3 && i.addressId == 2" class="icon" aria-hidden="true">
                          <use xlink:href="#icon-xuexiao"></use>
                        </svg>
                        {{ i.address }}
                      </p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="right m-padding">
                    <p class="m-color">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                      </svg> {{ getTimeStr(i.releaseTime) }}
                    </p>
                  </div>
                </el-col>

                <el-col :span="24">
                  <h2 style="font-weight: normal;text-align: center" class="m-padding">{{ i.title }}</h2>
                  <div class="m-padding">
                    <p style="text-align: left" class="m-padding-lr-lage">{{ i.content }}</p>
                  </div>
                </el-col>

                <!--           {{listLength}}-->
                <el-col :span="24">
                  <div class="m-padding" :class="[listLength(index) > 1 ? 'row' : 'center']">
                    <div v-for="item in i.imagesList">
                      <el-row>
                        <el-col :span="24"><el-image class="m-img-max m-padding m-margin-lr"
                            style="border: #bebdbd solid 1px;border-radius: 1px" :src="item"
                            :preview-src-list="i.imagesList"></el-image></el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="right m-padding">

                    <!--               点赞-->

                    <el-badge :value="i.numberOfLikes" class="item m-margin-lr-lage">
                      <el-button @click="onGiveLike(i.id, index)" style="border: none; box-shadow: 0 0 5px #0003;">

                        <svg v-if="i.isGoods == true" class="icon" aria-hidden="true">
                          <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <svg v-else class="icon" aria-hidden="true">
                          <use xlink:href="#icon-dianzan1"></use>
                        </svg>
                      </el-button>
                    </el-badge>
                    <!--               评论-->
                    <el-badge :value="i.numberOfComments" class="item" style="margin-right: 15px">
                      <el-button @click="onClickComment(i.id)" style="border: none; box-shadow: 0 0 5px #0003;">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-pinglun"></use>
                        </svg>
                      </el-button>
                    </el-badge>

                    <el-button v-if="i.userId == UserID && isDakai==true && spId == i.id" @click="onDelete(i.id)"
                      style="border: none; box-shadow: 0 0 5px #0003; margin-right: 5px;">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                      </svg>
                    </el-button>
                    <el-button v-if="i.userId == UserID" @click="onDakai(index)" style="border: none; box-shadow: 0 0 5px #0003;">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                      </svg>
                    </el-button>
                  </div>
                </el-col>

                <el-col :span="24" v-if="i.id == activePostId" class="m-padding-lage">
                  <el-row class="m-padding-lr">
                    <el-col :span="21"><el-input v-model="commentContent" type="textarea"
                        placeholder="请输入内容"></el-input></el-col>
                    <el-col :span="3"> <el-button type="primary" @click="onSendComment">发送</el-button></el-col>

                    <el-col :span="24" class="" style="border-bottom: solid #a7a8bd 1px" v-for="comment in commentList" :key="comment.id">
                      <div class="left m-padding-tb"><el-image
                          style="width: 40px; height: 40px; border-radius:50% " :src="comment.userImages"
                         ></el-image>
                        <p class="m-padding-lr">{{comment.userName}}</p><span class="m-color"> {{getTimeStr(comment.commentTime)}}</span>
                      </div>
                      <p class="m-padding-lr-max">{{comment.content}}</p>
                      <p class="right">
                        <el-button v-if="comment.userId==UserID" style="border: none" @click="onDeleteComment(comment.id)">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu1"></use>
                          </svg>
                        </el-button>
                       </p>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import { GetShare, GetMySharing, Delete, GiveLike, SendComment, DeleteComment, CommentList } from "@/api/share";

export default {
  name: "Share",

  data() {
    return {
      activeIndex: "0",
      UserID: JSON.parse(localStorage.getItem("user")).id,
      CampusSharingList: [],
      Xiaoqu: 0,
      activePostId: null,//已激活评论的这条帖子的id
      commentContent: '',//新输入的评论
      commentList: [],//评论列表
      spId: 0,
      isDakai: false,
    }
  },

  created() {
    this.GetCampusSharingList(0);
  },

  methods: {
    // 获取我的分享
    GetMySharingList() {
      // console.log(1);
      GetMySharing({ UserId: this.UserID }).then((res) => {
        console.log(res);
        this.CampusSharingList = res;
      });

    },

    getTimeStr(dateStr) {
      return this.formatTime(new Date(dateStr));
    },

    // 为什么JS没有格式化这种基础的不能再基础的玩意
    formatTime(dateIn) {
      let hours = dateIn.getHours();
      let minutes = dateIn.getMinutes();
      let seconds = dateIn.getSeconds();

      // 不会还有人在2023年用IE吧
      let strTime = String(hours).padStart(2, "0") + ':' + String(minutes).padStart(2, "0") + ':' + String(seconds).padStart(2, "0");
      return dateIn.getFullYear() + "/" + (dateIn.getMonth() + 1) + "/" + dateIn.getDate() + "  " + strTime;
    },

    onDakai(arr) {
      this.spId = this.CampusSharingList[arr].id;
      if (this.isDakai== false) {
        this.isDakai = true;
      }else {
        this.isDakai = false;
      }
    },

    // 获取全部分享
    GetCampusSharingList(address = 0) {
      // console.log(1);
      GetShare({ Address: address }).then((res) => {
        console.log(res);
        this.CampusSharingList = res;
        this.$nextTick(() => { // 在dom渲染完后,再执行动画
          this.$wow.init()
        })
      });
    },
    listLength(arr) {
      if (this.CampusSharingList[arr].imagesList != null) {
        return this.CampusSharingList[arr].imagesList.length;
      } else {
        return 0;
      }
    },
    handleSelect(key, keyPath) {
    },
    // 校区
    onChange(xiaoqu) {
      this.Xiaoqu = xiaoqu;
      // console.log(Xiaoqu)
      if (xiaoqu == 3) {
        this.GetMySharingList();
      } else {
        this.GetCampusSharingList(xiaoqu);
      }
    },
    //点赞
    onGiveLike(postId, index) {
      console.log(postId)
      GiveLike({ postId, UserId: this.UserID }).then((res) => {
        console.log(res)
        if (res == true) {
          this.CampusSharingList[index].isGoods = true;
          this.CampusSharingList[index].numberOfLikes++;
        } else {
          this.CampusSharingList[index].isGoods = false;
          this.CampusSharingList[index].numberOfLikes--;
        }
      })
    },
    // 删除帖子
    onDelete(id) {
      console.log(id)
      Delete({ postId: id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "帖子删除成功",
            type: "success",
          });
          if (this.Xiaoqu == 3) {
            this.GetMySharingList();
          } else {
            this.GetCampusSharingList(this.Xiaoqu);
          }
        }
      })
        .catch((err) => { })
    },
    //打开时获取评论列表
    onClickComment(postId) {
      if (this.activePostId == postId) {
        this.activePostId = null;
      } else {
        this.activePostId = postId;
        this.getCommentList(postId);
        // console.log(postId);
      }
    },
    // 获取评论
    getCommentList(postId) {
      CommentList({ PostId: postId, CommentPageSize: 20, OrderBy: 2 }).then((res) => {
        console.log(res);
        this.commentList = res.commentList;//存储评论列表
      })
    },
    //删除评论
    onDeleteComment(commentId) {
      DeleteComment({ commentId: commentId, PostId: this.activePostId }).then(() => {
        this.getCommentList(this.activePostId);
      })
    },
    //发表评论
    onSendComment(postId) {
      SendComment({ Content: this.commentContent, UserID: this.UserID, PostId: this.activePostId }).then(res => {
        this.getCommentList(this.activePostId);
        this.commentContent = "";
        if (this.Xiaoqu == 3) {
          this.GetMySharingList();
        } else {
          this.GetCampusSharingList(this.Xiaoqu);
        }
      })
    }
  }


}
</script>


<style scoped>
* {
  font-family: Microsoft Yahei UI, serif;
}

.body {
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.m-container {
  max-width: 72em !important;
  margin: auto !important;
  overflow-x:hidden;

}

.m-container-tiny {
  background: #fff;
  max-width: 50em !important;
  margin: 1em auto !important;

}

.m-padding-min {
  padding: 1em;
}

.m-padding-tiny {
  padding: 1.5em;
}

.m-padding {
  padding: 1em !important;
}

.m-padding-lage {
  padding: 3em;
}

.m-padding-max {
  padding: 4em;
}

.m-padding-mini {
  padding: 0 0.5em 0 0.5em !important;
}

.m-padding-tb {
  padding: 1em 0 1em 0 !important;
}

.m-padding-lr {
  padding: 0 1em 0 1em !important;
}

.m-padding-left {
  padding: 0 0 0 2em !important;
}


.m-padding-right {
  padding: 0 2em 0 0 !important;
}

.m-padding-lr-lage {
  padding: 0 2em 0 2em;
}

.m-padding-lr-max {
  padding: 0 3em 0 3em;
}

.m-padding-max {
  padding: 2em;
}

.m-margin-lr {
  margin: 0 0.5em 0 0.5em;
}

.m-margin {
  margin: 1em;
}

.m-margin-lr-lage {
  margin: 0 1em 0 1em;
}

/*.m-margin-tp{*/
/*   margin:2em 0 2em 0 !important;*/
/* }*/

.m-img-max {
  max-width: 20em;
}

.right {
  display: flex;
  justify-content: flex-end;
}

.center {
  display: flex !important;
  justify-content: center !important;
}

.left {
  display: flex;
  justify-content: flex-start;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;

}

.m-color {
  color: #bebdbd;
  font-size: 14px;
}
</style>